<script lang="ts" setup>
import {cn} from '@/lib/utils'

import {computed, ref} from 'vue'
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {AppWindowIcon, AppWindowMacIcon} from "lucide-vue-next";

interface ApplicationSwitcherProps {
  isCollapsed: boolean
  applications: {
    id: string,
    fullName: string,
    shortName: string,
    description: string
    labels: string[],
    icon: string
  }[]
}

const props = defineProps<ApplicationSwitcherProps>()

const selectedKey = ref<string>(props.applications[0].id)
const selectedKeyData = computed(() => props.applications.find(item => item.id === selectedKey.value))
</script>

<template>
  <Select v-model="selectedKey">
    <SelectTrigger
        aria-label="Select application"
        :class="cn(
        'flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0',
        { 'flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden': isCollapsed },
      )"
    >
      <SelectValue placeholder="Select an application">
        <div class="flex items-center gap-3">
          <Component class="size-4" :is="AppWindowIcon"/>
          <span v-if="!isCollapsed">
            {{ selectedKeyData!.shortName }}
          </span>
        </div>
      </SelectValue>
    </SelectTrigger>
    <SelectContent>
      <SelectItem v-for="application of applications" :key="application.id" :value="application.id">
        <div class="flex items-center gap-3 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
          <Component class="size-4" :is="AppWindowMacIcon"/>
          {{ application.fullName }}
        </div>
      </SelectItem>
    </SelectContent>
  </Select>
</template>
